<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>欢迎使用webTalk聊天室</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="description" content="">
  <meta name="keywords" content="">
  <meta name="author" content="">
  <link rel="icon" href="../static/images/logo.png" >
  <script>
    function browserRedirect() {
      var sUserAgent = navigator.userAgent.toLowerCase();
      var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
      var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
      var bIsMidp = sUserAgent.match(/midp/i) == "midp";
      var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
      var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
      var bIsAndroid = sUserAgent.match(/android/i) == "android";
      var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
      var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
      if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
        window.location.href='./iTalk.html'
      } else {
        console.log('在pc端浏览');
      }
    }
    browserRedirect();
  </script>
  <link rel="stylesheet" href="../static/css/iconfont.css">
  <link rel="stylesheet" href="../static/css/webTalk.css">
</head>
<body>
<div id="app"></div>
<template id="tpl">
  <div class="tpl">
    <div class="wt-warp" v-if="loginUser">
      <div class="wt-menu-box">
        <div class="wt-login-avatar">
          <img :src="loginUser.avatarUrl" alt="">
        </div>
        <div class="wt-menu-list">
          <div class="wt-menu-item" :class="{active:currentMenu=='session'}" @click="currentMenu='session'">
            <span class="wt-menu-icon iconfont icon-comments"></span>
          </div>
          <div class="wt-menu-item" :class="{active:currentMenu=='setting'}" @click="currentMenu='setting'">
            <span class="wt-menu-icon iconfont icon-cog"></span>
          </div>
          <div class="wt-menu-item" :class="{active:currentMenu=='about'}" @click="currentMenu='about'">
            <span class="wt-menu-icon iconfont icon-info"></span>
          </div>
        </div>
        <div class="wt-debug" @click.stop="showLogs">
          <span class="iconfont icon-bug"></span>
        </div>
      </div>
      <div class="wt-container">
        <div class="wt-session-warp" style="display: none" v-show="currentMenu=='session'">
          <div class="wt-session-list" >
            <div class="wt-session-search">
              <i class="iconfont icon-search"></i>
              <input type="text" class="wt-search-input" placeholder="搜索" v-model="keyword">
            </div>
            <div class="wt-session-users">
              <div class="wt-session-listBox wt-scroll">
                <div class="wt-users-item" v-for="item in searchUser(keyword)"
                     :class="{active:item.id==sessionId}"
                     @click="changeSession(item)">
                  <div class="wt-user-avatar">
                    <img :src="item.avatarUrl" alt="">
                  </div>
                  <div class="wt-item-info">
                    <div class="wt-item-name">
                      {{item.name}}
                      <span class="wt-message-time" v-if="getLastMessage(item.id).time">{{getLastMessage(item.id).time | friendlyTime}}</span>
                    </div>
                    <div class="wt-item-message">
                      {{getLastMessage(item.id).content}}
                      <span class="wt-message-num" v-if="getUnReaderNum(item.id)!=0">{{getUnReaderNum(item.id)}}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="wt-session-container">
            <div class="wt-session-window" v-if="session">
              <div class="wt-window-header">
                <div class="wt-session-info">
                  <img :src="session.avatarUrl" alt="">
                  <span>{{session.name}}</span>
                  <span class="wt-icon iconfont icon-phone wt-icon-phone" v-if="session.deviceType=='touch'"></span>
                  <span class="wt-icon iconfont icon-pc wt-icon-pc" v-if="session.deviceType=='pc'"></span>
                  <span class="wt-session-address">{{session.address}}</span>
                  <template v-if="session.type=='group'">
                    <span class="wt-session-address">({{sessionList.length}})</span>
                  </template>
                </div>
              </div>
              <div class="wt-window-container">
                <div class="wt-window-messageList wt-scroll" ref="messageList">
                  <template v-for="item in messageList">
                    <div class="wt-message-item" :class="item.from.id==loginUser.id?'wt-message-send':'wt-message-receive'" >
                      <div class="wt-avatarBox">
                        <img :src="item.from.avatarUrl" alt="">
                      </div>
                      <div class="wt-message-body">
                        <template v-if="setting.isName">
                          <div class="wt-from-info"  v-if="item.from.id!=loginUser.id">
                            <span >{{item.from.name}}</span>
                            <span class="wt-time-span" v-if="setting.isTime">{{item.time | friendlyTime}}</span>
                          </div>
                          <div class="wt-from-info" v-else>
                            <span class="wt-time-span" v-if="setting.isTime">{{item.time | friendlyTime}}</span>
                            <span >{{item.from.name}}</span>
                          </div>
                        </template>
                        <div class="wt-message-text" v-html="parseText(item.content)"></div>
                      </div>
                    </div>
                  </template>
                </div>
              </div>
              <div class="wt-window-footer">
                <div class="wt-toolBar-box">
                  <transition name="slider">
                    <div class="wt-expression-panel" v-show="isShow">
                      <div class="wt-expression-list">
                        <div class="wt-expression-item" v-for="item in qqExpression" @click.stop="selectExpression(item)">
                          <img :src="baseUrl+item.url" alt="" >
                        </div>
                      </div>
                    </div>
                  </transition>
                  <span class="wt-toolBtn" @click.stop="showExpression()">
                  <i class="iconfont icon-expression"></i>
                </span>
                </div>
                <div class="wt-message-box">
                <textarea class="wt-message-input wt-scroll"
                          v-model="text"
                          placeholder="请输入信息"
                          @keyup.enter="sendMessage(text)"></textarea>
                </div>
                <div class="wt-sendBtn-box">
                  <span class="wt-sendBtn" @click="sendMessage(text)">发送</span>
                </div>
              </div>
            </div>
            <div class="wt-session-window" v-if="!session">
            <span class="wt-no-session">
              <svg t="1591765273919" class="icon" viewBox="0 0 1284 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2667" width="200" height="200"><path d="M558.563164 680.893113c0 165.030026 162.721913 298.900536 362.373623 298.900536 48.470357 0 95.786658-8.078393 137.332679-21.927066 11.540561 5.770281 94.632602 77.32176 113.0975 64.627143 12.694617-10.386505-30.005459-87.708265-33.467628-101.556939 88.862322-54.240638 146.565128-140.794847 146.565128-238.889618 0-165.030026-162.721913-298.900536-362.373623-298.900536S558.563164 515.863087 558.563164 680.893113z m438.541327-106.173163c0-28.851403 23.081122-51.932526 51.932526-51.932526s51.932526 23.081122 51.932525 51.932526-23.081122 51.932526-51.932525 51.932525c-28.851403 1.154056-51.932526-23.081122-51.932526-51.932525z m-255.046403 0c0-28.851403 23.081122-51.932526 51.932525-51.932526s51.932526 23.081122 51.932526 51.932526-23.081122 51.932526-51.932526 51.932525c-28.851403 1.154056-53.086582-23.081122-51.932525-51.932525z" p-id="2668" fill="#707070"></path><path d="M526.249593 678.585001c0-180.032755 177.724643-325.443827 395.84125-325.443827 11.540561 0 23.081122 0 33.467628 1.154056C931.323292 154.643521 727.055358 0 478.933291 0 214.654439 0 0 176.570587 0 394.687194c0 129.254286 76.167704 244.659898 192.727373 316.211378-4.616224 17.310842-60.010918 120.021837-43.854133 133.870511 24.235179 16.156786 133.87051-78.475816 148.87324-85.400153 55.394694 19.618954 116.559669 30.005459 181.186811 30.005459 23.081122 0 46.162245-1.154056 69.243368-4.616225-15.00273-33.467628-21.927066-69.243367-21.927066-106.173163zM646.271429 185.803036c38.083852 0 69.243367 31.159515 69.243368 69.243367 1.154056 38.083852-30.005459 69.243367-69.243368 69.243368-38.083852 0-69.243367-31.159515-69.243367-69.243368s31.159515-69.243367 69.243367-69.243367z m-335.830332 138.486735c-38.083852 0-69.243367-31.159515-69.243367-69.243368s31.159515-69.243367 69.243367-69.243367 69.243367 31.159515 69.243368 69.243367-31.159515 69.243367-69.243368 69.243368z" p-id="2669" fill="#707070"></path></svg>
            </span>
            </div>
          </div>
        </div>
        <div class="wt-setting-warp" style="display: none" v-show="currentMenu=='setting'">
          <div class="wt-setting-container">
            <h2 class="wt-container-title">设置</h2>
            <div class="wt-loginInfo-warp">
              <div class="wt-loginInfo-avatar">
                <img :src="loginUser.avatarUrl" alt="">
              </div>
              <div class="wt-loginInfo-container">
                <div class="wt-user-name">{{loginUser.name}}</div>
                <div class="wt-user-subInfo" >
                  <span class="wt-icon iconfont icon-pc wt-icon-pc"></span>
                  {{loginUser.address}}
                </div>
              </div>
            </div>
            <div class="wt-setting-list">
              <div class="wt-setting-item">
                <label><input type="checkbox" v-model="setting.isVoice"><span>消息提示音</span></label>
              </div>
              <div class="wt-setting-item">
                <label><input type="checkbox" v-model="setting.isTime"><span>显示消息时间</span></label>
              </div>
              <div class="wt-setting-item">
                <label><input type="checkbox" v-model="setting.isName"><span>显示用户名称</span></label>
              </div>
            </div>
          </div>
        </div>
        <div class="wt-about-warp" v-show="currentMenu=='about'">
          <div class="wt-about-container">
            <h2 class="wt-container-title">关于</h2>
            <div class="wt-about-list">
              <div class="wt-about-item"><span>版本：v1.0</span></div>
              <div class="wt-about-item"><span>协议：MIT</span></div>
              <div class="wt-about-item"><span>GitHub：</span><a href="https://github.com/cleverqin/node-websocket-Chatroom" target="_blank">https://github.com/cleverqin/node-websocket-Chatroom</a></div>
              <div class="wt-about-item"><span>邮箱：705597001@qq.com</span></div>
              <div class="wt-about-item">
              <span>
                <a href="https://github.com/cleverqin/node-websocket-Chatroom" target="_blank">
                  <img src="https://img.shields.io/github/stars/cleverqin/node-websocket-Chatroom?label=Star&style=flat&logo=github" alt="" style="vertical-align: middle;">
                </a>
                <a href="https://github.com/cleverqin/node-websocket-Chatroom" target="_blank">
                  <img src="https://img.shields.io/github/forks/cleverqin/node-websocket-Chatroom?label=Fork&style=flat&logo=github" alt="" style="vertical-align: middle;">
                </a>
              </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <login @login="userLogin" v-if="!loginUser"></login>
    <transition name="slider">
      <div class="wt-logBox" v-show="isShowLog">
        <div class="wt-logHeader">
          连接日志
          <span class="wt-log-closeBtn iconfont icon-close" @click.stop="isShowLog=false"></span>
        </div>
        <div class="wt-log-container" @click.stop="">
          <div class="ui-scroll wt-log-list" id="log-container">
            <div class="wt-log-item" v-for="log in logs">
              <span :class="'wt-log-'+log.type">{{log.text}}</span>
              <span class="wt-log-time">{{log.time|formatTime}}</span>
            </div>
          </div>
        </div>
      </div>
    </transition>
    <transition name="slider">
      <div class="wt-alter-message" v-show="isAlter">{{alterMessage}}</div>
    </transition>
    <audio src="../static/images/8400.mp3" ref="audio"></audio>
    <a-player></a-player>
  </div>
</template>
<template id="login">
  <div class="wt-loginBox">
    <div class="wt-loginBanner">
      <div class="wt-error-message" v-if="errorMsg">{{errorMsg}}</div>
    </div>
    <div class="wt-loginForm-box">
      <form class="wt-login-form">
        <div class="wt-user-avatarBox">
          <img :src="user.avatarUrl" alt="" @click.stop="isShow=!isShow">
          <transition name="slider">
            <div class="wt-select-imgBox" v-show="isShow">
              <div class="wt-addAvatar-box">
                <input type="text" v-model="QQ" placeholder="输入QQ号添加使用QQ头像" @click.stop="" @keyup.enter="addQQAvatar(QQ)">
              </div>
              <ul class="wt-avatar-list">
                <li :class="{active:user.avatarUrl==item}" v-for="item in avatars">
                  <img :src="item" alt="" @click="user.avatarUrl=item">
                </li>
              </ul>
            </div>
          </transition>
        </div>
        <div class="wt-form-inputBox">
          <input type="text" class="wt-user-name" placeholder="用户名" v-model="user.name">
          <input type="text" class="wt-user-password" placeholder="密码">
          <button type="button" class="wt-formBtn" @click="login(user)">登录</button>
        </div>
      </form>
    </div>
  </div>
</template>
<template id="aPlayer">
  <div class="ui-aPlayer-warp" :class="{'ui-aPlayer-hide':!isPlayer}">
    <div class="ui-aPlayer-container">
      <!--封面-->
      <div class="ui-aPlayer-poster">
        <img :src="curSong.image" alt="封面">
        <svg t="1592281805404" class="ui-load-error" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3681" width="200" height="200" v-if="isError">
          <path d="M512 85.333333C277.333333 85.333333 85.333333 277.333333 85.333333 512s192 426.666667 426.666667 426.666667 426.666667-192 426.666667-426.666667S746.666667 85.333333 512 85.333333z m42.666667 640h-85.333334v-85.333333h85.333334v85.333333z m0-170.666666h-85.333334V298.666667h85.333334v256z" p-id="3682" fill="#cdcdcd"></path>
        </svg>
      </div>
      <!--歌曲信息，歌名、歌手、时间-->
      <div class="ui-aPlayer-infoBox">
        <div class="ui-song-infoRow ui-song-name">{{curSong.title}}</div>
        <div class="ui-song-infoRow ui-song-author">{{curSong.author}}</div>
        <div class="ui-song-infoRow ui-song-time">{{totalTime | formatTime}}</div>
      </div>
      <!--播放器控制器，上一曲、播放/暂停、下一曲-->
      <div class="ui-aPlayer-ctlBox">
        <div class="ui-ctrl-col">
          <span class="iconfont icon-prev" @click="prevSong"></span>
        </div>
        <div class="ui-ctrl-col ui-toggle-ctrl">
          <span class="iconfont" @click="togglePlay" :class="isPlay?'icon-pause':'icon-play'"></span>
        </div>
        <div class="ui-ctrl-col">
          <span class="iconfont icon-next" @click="nextSong"></span>
        </div>
      </div>
      <!--音量控制器，调节播放音量-->
      <div class="ui-aPlayer-volBox">
        <span class="iconfont ui-vol-icon" :class="volume==0?'icon-mute':'icon-voice'"></span>
        <div class="ui-voice-box"></div>
      </div>
      <!--播放器功能菜单，歌词显示、播放列表-->
      <div class="ui-aPlayer-menuBox">
        <span class="ui-aPlayer-lrcBtn" @click="isLrc=!isLrc">词</span>
        <span class="ui-aPlayer-listBtn iconfont icon-menu" @click="isList=!isList"></span>
      </div>
      <!--播放器时间进度-->
      <div class="ui-aPlayer-timeBox"></div>
      <span class="ui-aPlayer-curTime">{{curTime | formatTime}}</span>
    </div>
    <div class="ui-aPlayer-toggleShowBtn" @click="isPlayer=!isPlayer">
      <span class="iconfont icon-left ui-toggle-showBtn"></span>
      <span class="iconfont icon-right ui-toggle-showBtn"></span>
    </div>
    <div class="ui-aPlayer-lrcBox" :class="{'ui-aPlayer-lrcHide':!isLrc}">
      <div class="ui-aPlayer-lrcWarp"></div>
      <span class="ui-close-lrcBtn iconfont icon-close" @click="isLrc=false"></span>
    </div>
    <audio></audio>
    <div class="ui-aPlayer-songsWarp" :class="{'ui-aPlayer-songsHide':!isList}">
      <div class="ui-songs-header">
        <span class="ui-header-text">歌曲列表</span>
        <span class="ui-songs-num">({{songList.length}})</span>
        <span class="ui-close-listBtn iconfont icon-xiangxia" @click="isList=false"></span>
      </div>
      <div class="ui-songListWarp scroll">
        <div class="ui-song-item" v-for="item in songList" :key="item.id" :class="{active:item.id==curSong.id}">
          <span class="iconfont icon-bofang ui-play-cur"></span>
          <span class="ui-song-info">{{item.title}}-{{item.author}}</span>
          <div class="ui-song-btnBox">
            <span class="iconfont icon-bofang" @click="play(item)"></span>
            <span class="iconfont icon-up" @click="moveUp(item)"></span>
            <span class="iconfont icon-down" @click="moveDown(item)"></span>
            <span class="iconfont icon-shanchu" @click="deleteSong(item)"></span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script src="../static/js/vue.min.2.2.0.js"></script>
<script src="../static/js/vue-resource.js"></script>
<script src="../static/js/socket.io.js"></script>
<script src="../static/js/example.js"></script>
</body>
</html>
